<%--
  @author supun nimesh karunathilaka
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<script type="text/javascript">
    function addRow() {
        var dsDivisionName = $("#dsDivisionsSelected option:selected");
        dsDivisionName.each(function() {
            $("#dsDivisionsSelected option").remove();
        })
    }

    $(document).ready(function() {
        $("#dsDivisionsSelected").each(function() {
            $("#dsDivisionsSelected option").attr("selected", "selected");
        });
        var count = document.getElementById("dsDivisionsSelected").options.length;
        var mode = document.getElementById("edit_mode").value;
        if (count == 0 || mode == 0) {
            document.getElementById("dsDivisionsSelectedTr").style.display = 'none';
        }
    });

    function selectList() {
        $("#dsDivisionsSelected").each(function() {
            $("#dsDivisionsSelected option").attr("selected", "selected");
        });
    }

    function removeOptionSelected() {
        var elSel = document.getElementById('dsDivisionsSelected');
        var i;
        for (i = elSel.length - 1; i >= 0; i--) {
            if (elSel.options[i].selected) {
                elSel.remove(i);
            }
        }
        var count = document.getElementById("dsDivisionsSelected").options.length;
        if (count == 0) {
            document.getElementById("dsDivisionsSelectedTr").style.display = 'none';
        }
    }

    function addElement() {
        var options = "";
        var dsDivisionName = $("#dsDivision option:selected").text();
        var dsDivisionId = $("select#dsDivision").attr("value");
        var dsDivision = document.getElementById("dsDivision");
        var length = dsDivision.length;
        if (dsDivisionId == 0) {
            for (i = 1; i < length; i++) {
                var val = dsDivision.options[i].value;
                var text = dsDivision.options[i].text;
                if (testDuplicate(val)) {
                    options += '<option value="' + val + '">' + text + '</option>';
                }
            }
        } else {
            if (testDuplicate(dsDivisionId)) {
                options = '<option value="' + dsDivisionId + '">' + dsDivisionName + '</option>';
            }
        }
        document.getElementById("dsDivisionsSelectedTr").style.display = '';
        $("select#dsDivisionsSelected").append(options);
        selectList();
    }

    function testDuplicate(val) {
        var option = document.getElementById("dsDivisionsSelected").options
        var returnVal = 0;
        if (option.length == 0) {
            returnVal = 0;
            return true;
        }
        for (var x = 0; x < option.length; x++) {
            var val1 = parseInt(option[x].value);
            var val2 = parseInt(val)
            if (val1 == val2) {
                returnVal = 1;
                return false;
            }
        }
        return true;
    }

    $(function() {

        var mode = document.getElementById("edit_mode").value;

        if (mode == 2 || mode == 3 || mode == 9 || mode == 20 || mode == 21 || mode == 30) {
            var fieldIds = new Array(
                    'district',
                    'dsDivision',
                    'hectareId',
                    'acreId',
                    'roodsId',
                    'perchesId',
                    'select_all_col_managers',
                    'planNumber',
                    'lotNumber',
                    'removeDsButton'
                    );
            disableFields(fieldIds);
        }
    });


</script>
<script type="text/javascript">
    $('select#districtId').bind('change', function(evt1) {
        var options1 = '';
        var oSelect = document.getElementById('districtId');
        for (var iCount = 0; oSelect.options[iCount]; iCount++) {
            if (oSelect.options[iCount].selected == true) {
                var id = oSelect.options[iCount].value;
                $.getJSON('/ecivil/crs/DivisionLookupService', {id:id,mode:3},
                         function(data) {
                             var ds = data.dsDivisionList;
                             for (var i = 0; i < ds.length; i++) {
                                 options1 += '<option value="' + ds[i].optionValue + '">' + ds[i].optionDisplay + '</option> \n';
                             }
                             $("select#divisionId").html(options1);
                         });
            }
        }

    });


    $(function() {
        $('select#district').bind('change', function(evt1) {
            //var id = $("select#district").attr("value");
            var oSelect = document.getElementById('district');
            var options1 = '<option value="0"> - Select All - </option> ';
            for (var iCount = 0; oSelect.options[iCount]; iCount++) {
                if (oSelect.options[iCount].selected == true) {
                    var id = oSelect.options[iCount].value;
                    $.getJSON('${pageContext.request.contextPath}/common/DivisionLookupService', {id:id},
                             function(data) {
                                 var ds = data.dsDivisionList;
                                 for (var i = 0; i < ds.length; i++) {
                                     options1 += '<option value="' + ds[i].optionValue + '">' + ds[i].optionDisplay + '</option>'
                                 }
                                 $("select#dsDivision").html(options1);
                             });

                }

            }


        });
    });


    /*    $(function() {
     $('select#district').bind('change', function(evt1) {
     var id = $("select#district").attr("value");
     alert(id)
     $.getJSON('${pageContext.request.contextPath}/common/DivisionLookupService', {id:id},
     function(data) {
     var options1 = '<option value="0"> - Select All - </option> ';
     var ds = data.dsDivisionList;
     for (var i = 0; i < ds.length; i++) {
     options1 += '<option value="' + ds[i].optionValue + '">' + ds[i].optionDisplay + '</option>'
     }
     $("select#dsDivision").html(options1);
     });

     });
     });*/

</script>
<tr>
    <td><s:label value="%{getText('plan_no.label')}"/></td>
    <td><s:textfield name="landApplication.planNo" id="planNumber" cssStyle="width: 200px;"/></td>
    <td><s:label value="%{getText('lot_no.label')}"/></td>
    <td><s:textfield name="landApplication.lotNo" id="lotNumber" cssStyle="width: 200px;"/></td>
</tr>
<tr>
    <td colspan="4"><s:label value="%{getText('expected_area.label')}"/></td>
</tr>
<tr>
    <td></td>
    <td colspan="3">
        <table id="childrenTable">
            <s:if test="!(mode == 2 || mode == 3 || mode == 4 || mode == 5 || mode == 6 || mode == 8 || mode == 9)">
                <tr>
                    <td><s:label value="%{getText('district.label')}"/></td>
                    <td colspan="3"><s:select
                            multiple="true"
                            cssClass="width-120-px"
                            name="district"
                            id="district"
                            list="districtList"/>
                    </td>
                </tr>
                <tr>
                    <td><s:label value="%{getText('ds_division.label')}"/></td>
                    <td><s:select cssClass="width-120-px"
                                  name="dsDivision"
                                  id="dsDivision"
                                  headerKey="0"
                                  headerValue="%{getText('select_all.label')}"
                                  list="dsDivisionList"/>
                    </td>
                    <td>
                        <input type="button" id="select_all_col_managers" value="Add" onclick="addElement()"/>
                    </td>
                </tr>
            </s:if>
            <td></td>
            <tr id="dsDivisionsSelectedTr">
                <td></td>
                <s:if test="!(mode == 2 || mode == 3 || mode == 4 || mode == 5 || mode == 6 || mode == 8 || mode == 9)">
                    <td>
                        <s:select
                                name="dsDivisionsSelected"
                                id="dsDivisionsSelected"
                                list="dsDivisionsSelectedList"
                                multiple="true"
                                />
                    </td>
                </s:if>
                <s:else>
                    <td>
                        <s:select
                                disabled="true"
                                name="dsDivisionsSelected"
                                id="dsDivisionsSelected"
                                list="dsDivisionsSelectedList"
                                multiple="true"
                                />
                    </td>
                </s:else>
                <s:if test="!(mode == 2 || mode == 3 || mode == 4 || mode == 5 || mode == 6 || mode == 8 || mode == 9)">
                    <td>
                        <input type="button" value="Delete Selected" onclick="removeOptionSelected()"
                               id="removeDsButton"/>
                    </td>
                </s:if>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td><s:label value="%{getText('expected_extent.label')}"/></td>
    <td colspan="3">
        <table>
            <tr>
                <td><s:label value="%{getText('hectare_label')}"/></td>
                <td colspan="5"><s:textfield name="hectare" cssClass="width-120-px"
                                             id="hectareId" onKeyPress="return numbersonly(event,true)"/></td>
            </tr>
            <tr>
                <td><s:label value="%{getText('acre.label')}"/></td>
                <td><s:textfield cssClass="width-120-px" id="acreId" onKeyPress="return numbersonly(event,true)"/></td>
                <td><s:label value="%{getText('roods.label')}"/></td>
                <td><s:textfield cssClass="width-120-px" id="roodsId" onKeyPress="return numbersonly(event,true)"/></td>
                <td><s:label value="%{getText('perches.label')}"/></td>
                <td><s:textfield cssClass="width-120-px" id="perchesId"
                                 onKeyPress="return numbersonly(event,true)"/></td>
            </tr>
        </table>
    </td>

</tr>
<s:hidden id="landExtent" name="landApplication.landExpectedExtent"/>
<%--
    <s:include value="../documentUpload.jsp"/>
 --%>

